<!--
 * @Description: 
 * @Author: xiongkuobiao
 * @Date: 2023-02-28 11:09:31
 * @LastEditors: xiongkuobiao
 * @LastEditTime: 2023-07-19 14:40:32
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖和节流</title>
</head>

<body>
    <input type="button" value="防抖提交" />
    <input type="text" name="" id="text" />
    <script>
        {
            /**
             * 防抖函数：
             * 当按钮在delay时间内多次按下时，只执行最后按下的一次，常用于拍照按钮、表单提交按钮
             */
            const button = document.querySelector("input");
            /**
             * 防抖函数核心实现：
             * 1.注意修改this的指向，我们希望this指向按钮
             * 2.当在delay时间间隔内按下按钮时，timer清零，导致之前的按钮提交无效，
             *   直到delay时间内没有按下按钮，将执行最后一次按下提交
             */
            function debounce(func, wait, immediate) {
                let timeout;
                return function () {
                    if (timeout) clearTimeout(timeout);
                    if (immediate) {
                        const callNow = !timeout;
                        timeout = setTimeout(function () {
                            timeout = null;
                        }, wait)
                        if (callNow) func.apply(this, arguments)
                    } else {
                        timeout = setTimeout(function () {
                            func.apply(this, arguments)
                        }, wait);
                    }
                }
            }

            function onSubmit() {
                console.log(111);
            }
            button.addEventListener("click", debounce(onSubmit, 1000, false));
        }


        {
            const input = document.getElementById("text");
            function throttle(func, wait, immediate) {
                let timeout;
                return function () {
                    if (!timeout) {
                        if (immediate) {
                            func.apply(this, arguments)
                            timeout = setTimeout(function () {
                                timeout = null;
                            }, wait)
                        } else {
                            timeout = setTimeout(function () {
                                timeout = null;
                                func.apply(this, arguments)
                            }, wait)
                        }
                    }
                }
            }
            function onPut() {
                console.log(222);
                console.log(this);
            }
            input.addEventListener("keyup", throttle(onPut, 1000, false));
        }



        function promise2() {
            return new Promise((resolve) => {
                console.log('promise2');
                resolve();
            })
        }
        async function async1() {
            console.log('async1 start');
            await promise2();
            console.log('async1 end');
        }
        async1();
        console.log('script end');
    </script>
</body>

</html>